<template>
  <div>
    <!-- <div  :id="ichartName"></div> -->
    <div class="ichart-box">
      <div id="ichart" class="ichart"></div>
      <div id="ichart2" class="ichart"></div>
      <div id="ichart3" class="ichart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'GovSuperviseAdminTabularData',
  props: {
    ichartName: {
      type: String,
      required: false,
    }
  },
  data() {
    return {
      myChart: '',
      myChart2: '',
      myChart3: '',
      dataList: [], //数据列表
    };
  },
  created() {
    // this.getAreaId()
    // this.getEchartsOne()
    // this.getEchartsTwo()
  },
  mounted() { },
  methods: {
    getDataList(data) { //获取areaId
      this.dataList = data
      console.log('res66=>>', data)
      this.initChart()
      this.initChart2()
      this.initChart3()
    },
    domIsExistence(name) {
      if (name != null && name != "" && name != undefined) {
          name.dispose(); //解决echarts dom已经加载的报错
      }
    },
    // 交易数据汇总订单金额明细
    initChart() {
      var _this = this
      this.domIsExistence(this.myChart)
      this.myChart = echarts.init(document.getElementById('ichart'));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = params.name + '：' + params.value + '（' + params.data.ratio + '%）';
            return str
          }
        },
        color: ['#5B90FF', '#FF6B4B', '#FFA02F', '#F1D233', '#A980FF', '#FF9898', '#FF8181', '#01D6F3', '#FF7953',
          '#54E8B8', '#FFA749'
        ],
        legend: {
          selectedMode: false,
          top: 'center',
          left: 'left',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 5,
          lineHeight: 19,
          textStyle: {
            color: '#576276',
            fontWeight: '400',
            fontSize: 14,
            padding: [0, 0, 0, 5]
          },
          formatter: function (name) {
            let datas = _this.dataList.moneyList
            let values = ''
            let ratio = ''
            for (let i = 0, l = datas.length; i < l; i++) {
              if (datas[i].name == name) {
                ratio = datas[i].ratio;
                values = datas[i].value;
              }
            }
            return name + '：￥' + values + '（' + ratio + '%）';
          }
        },
        series: [{
          // name: 'Access From',
          type: 'pie',
          radius: ['60%', '90%'],
          center: ["70%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '{total|现金收款（元）}' + '\n\r' + '{active|' + _this.dataList.moneyValue + '}',
            rich: {
              total: {
                fontWeight: 'normal',
                fontSize: 16,
                fontFamily: "微软雅黑",
                color: '#4B5466',
                lineHeight: 22,
              },
              active: {
                fontWeight: 'normal',
                fontFamily: "微软雅黑",
                fontSize: 24,
                color: '#4B5466',
                lineHeight: 42,
              },
            }
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
          },
          labelLine: {
            show: false
          },
          data: _this.dataList.moneyList,
        }]
      }
      this.myChart.setOption(option)
    },
    // 交易数据汇总订单数量明细
    initChart2() {
      var _this = this
      this.domIsExistence(this.myChart2)
      this.myChart2 = echarts.init(document.getElementById('ichart2'));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = params.name + '：' + params.value + '笔';
            return str
          }
        },
        color: ['#5B90FF', '#FF6B4B', '#FFA02F', '#F1D233', '#A980FF', '#FF9898', '#FF8181', '#01D6F3', '#FF7953',
          '#54E8B8', '#FFA749'
        ],
        legend: {
          selectedMode: false,
          top: 'center',
          left: 'left',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 5,
          lineHeight: 19,
          textStyle: {
            color: '#576276',
            fontWeight: '400',
            fontSize: 14,
            padding: [0, 0, 0, 5]
          },
          formatter: function (name) {
            let datas = _this.dataList.numList
            let values = ''
            let ratio = ''
            for (let i = 0, l = datas.length; i < l; i++) {
              if (datas[i].name == name) {
                ratio = datas[i].ratio;
                values = datas[i].value;
              }
            }
            // return name + '：' + values + '（' + ratio + '%）';
            return name + '：' + values + '笔';
          }
        },
        series: [{
          name: 'Access From',
          type: 'pie',
          radius: ['60%', '90%'],
          center: ["65%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '{total|账单数量（笔）}' + '\n\r' + '{active|' + _this.dataList.numValue + '}',
            rich: {
              total: {
                fontWeight: '400',
                fontSize: 16,
                fontFamily: "微软雅黑",
                color: '#4B5466',
                lineHeight: 22,
              },
              active: {
                fontWeight: '400',
                fontFamily: "微软雅黑",
                fontSize: 24,
                color: '#4B5466',
                lineHeight: 42,
              },
            }
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
          },
          labelLine: {
            show: false
          },
          data: _this.dataList.numList,
        }]
      }
      this.myChart2.setOption(option)
    },
    // CoCo交易明细VO
    initChart3() {
      var _this = this
      this.domIsExistence(this.myChart3)
      this.myChart3 = echarts.init(document.getElementById('ichart3'));
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = params.name + '：' + params.value + '（' + params.data.ratio + '%）';
            return str
          }
        },
        color: ['#5B90FF', '#FF6B4B', '#FFA02F', '#F1D233', '#A980FF', '#FF9898', '#FF8181', '#01D6F3', '#FF7953',
          '#54E8B8', '#FFA749'
        ],
        legend: {
          selectedMode: false,
          top: 'center',
          left: 'left',
          orient: 'vertical',
          itemGap: 15,
          itemWidth: 12,
          itemHeight: 5,
          lineHeight: 19,
          textStyle: {
            color: '#576276',
            fontWeight: '400',
            fontSize: 14,
            lineHeight: 20,
            padding: [0, 0, 0, 5]
          },
          formatter: function (name) {
            let datas = _this.dataList.cocoList
            let values = ''
            let ratio = ''
            for (let i = 0, l = datas.length; i < l; i++) {
              if (datas[i].name == name) {
                ratio = datas[i].ratio;
                values = datas[i].value;
              }
            }
              let params = name + '：' + values + '（' + ratio + '%）' //图例文本的长度
              if(params.length > 18){
                params = name + '：' + values +'\n'+'（' + ratio + '%）' //图例文本的长度
              }
            // return echarts.format.truncateText(srt, 200, '14px Microsoft Yahei', '…');
            return params;
          }
        },
        series: [{
          // name: 'Access From',
          type: 'pie',
          radius: ['60%', '90%'],
          center: ["65%", "50%"],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#4c4a4a',
            formatter: '{total|积分收支(CoCo)}' + '\n\r' + '{active|' + _this.dataList.cocoValue + '}',
            rich: {
              total: {
                fontWeight: '400',
                fontSize: 16,
                fontFamily: "微软雅黑",
                color: '#4B5466',
                lineHeight: 22,
              },
              active: {
                fontWeight: '400',
                fontFamily: "微软雅黑",
                fontSize: 24,
                color: '#4B5466',
                lineHeight: 42,
              },
            }
          },
          emphasis: {
            scale: true,
            scaleSize: 10,
          },
          labelLine: {
            show: false
          },
          data: _this.dataList.cocoList,
        }]
      }
      this.myChart3.setOption(option)
    },
  },
};

</script>

<style lang="scss" scoped>
.ichart-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;

  .ichart {
    width: calc(100% / 3);
    height: 100%;
  }
}
</style>
